<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">收货人</text>
        <input 
          class="input" 
          v-model="form.receiverName" 
          placeholder="请输入收货人姓名"
        />
      </view>
      
      <view class="form-item">
        <text class="label">手机号码</text>
        <input 
          class="input" 
          v-model="form.phoneNumber" 
          type="number"
          maxlength="11"
          placeholder="请输入手机号码"
        />
      </view>
      
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker 
          mode="region" 
          @change="handleRegionChange"
          :value="[form.province, form.city, form.district]"
        >
          <view class="picker">
            {{ form.province || form.city || form.district ? 
              `${form.province} ${form.city} ${form.district}` : 
              '请选择所在地区' 
            }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">详细地址</text>
        <textarea 
          class="textarea" 
          v-model="form.detailAddress"
          placeholder="请输入详细地址"
        />
      </view>
      
      <view class="form-item">
        <text class="label">设为默认地址</text>
        <switch 
          :checked="form.isDefault" 
          @change="e => form.isDefault = e.detail.value"
        />
      </view>
    </view>
    
    <view class="footer">
      <button class="save-btn" @tap="saveAddress">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import addressService from '@/services/address';

// 表单数据
const form = ref({
  receiverName: '',
  phoneNumber: '',
  province: '',
  city: '',
  district: '',
  detailAddress: '',
  isDefault: false
});

// 地址ID
const addressId = ref(null);

// 获取地址详情
const getAddressDetail = async (id) => {
  try {
    const res = await addressService.getList();
    const address = res.data.find(item => item.id === parseInt(id));
    if (address) {
      form.value = {
        receiverName: address.receiverName,
        phoneNumber: address.phoneNumber,
        province: address.province,
        city: address.city,
        district: address.district,
        detailAddress: address.detailAddress,
        isDefault: address.isDefault
      };
    }
  } catch (error) {
    uni.showToast({
      title: '获取地址详情失败',
      icon: 'none'
    });
  }
};

// 处理地区选择
const handleRegionChange = (e) => {
  const [province, city, district] = e.detail.value;
  form.value.province = province;
  form.value.city = city;
  form.value.district = district;
};

// 表单验证
const validateForm = () => {
  if (!form.value.receiverName) {
    uni.showToast({
      title: '请输入收货人姓名',
      icon: 'none'
    });
    return false;
  }
  if (!form.value.phoneNumber) {
    uni.showToast({
      title: '请输入手机号码',
      icon: 'none'
    });
    return false;
  }
  if (!/^1\d{10}$/.test(form.value.phoneNumber)) {
    uni.showToast({
      title: '手机号码格式不正确',
      icon: 'none'
    });
    return false;
  }
  if (!form.value.province || !form.value.city || !form.value.district) {
    uni.showToast({
      title: '请选择所在地区',
      icon: 'none'
    });
    return false;
  }
  if (!form.value.detailAddress) {
    uni.showToast({
      title: '请输入详细地址',
      icon: 'none'
    });
    return false;
  }
  return true;
};

// 保存地址
const saveAddress = async () => {
  if (!validateForm()) return;
  
  try {
    if (addressId.value) {
      await addressService.update(addressId.value, form.value);
    } else {
      await addressService.add(form.value);
    }
    
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    });
    
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (error) {
    uni.showToast({
      title: '保存失败',
      icon: 'none'
    });
  }
};

// 生命周期
onLoad((options) => {
  if (options.id) {
    addressId.value = options.id;
    getAddressDetail(options.id);
  }
});
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.form {
  background-color: #fff;
  padding: 0 30rpx;
  margin-top: 20rpx;
  
  .form-item {
    display: flex;
    align-items: center;
    min-height: 100rpx;
    border-bottom: 1rpx solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      width: 160rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .input {
      flex: 1;
      height: 100rpx;
      font-size: 28rpx;
    }
    
    .picker {
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .textarea {
      flex: 1;
      height: 160rpx;
      font-size: 28rpx;
      padding: 20rpx 0;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background-color: #fff;
  
  .save-btn {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #ff4444;
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
  }
}
</style> 